<!DOCTYPE html>
<html class="x-admin-sm">

<head>
<meta charset="UTF-8">
<title>欢迎页面-X-admin2.2</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="../../css/font.css">
<link rel="stylesheet" href="../../css/xadmin.css">
<script type="text/javascript" src="../../lib/layui/layui.js"
	charset="utf-8"></script>
<script type="text/javascript" src="../../js/xadmin.js"></script>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
        <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
        <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
	<div class="layui-fluid">
		<div class="layui-row">
			<div class="layui-col-md8">
				<form class="layui-form layui-form-pane" action="">
				
					<input name="id" type="hidden" th:value="${obj== null?'':obj.id}">
					
					<div class="layui-form-item">
						<label class="layui-form-label">商品名称</label>
						<div class="layui-input-block">
							<input type="text" name="name" th:value="${obj== null?'':obj.name}" required lay-verify="required"
								placeholder="请输入标题" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">商品类别</label>
						<div class="layui-input-block">
							<select name="typeMax" lay-verify="required">
								<option th:value="${item.id}" th:text="${item.name}"
									th:each="item:${cateList}" th:selected="(${item.id} == ${obj== null?'':obj.typeMax})"></option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">商品简介</label>
						<div class="layui-input-block">
							<input type="text" name="explain" th:value="${obj== null?'':obj.explain}" required lay-verify="required"
								placeholder="" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">商品价格</label>
						<div class="layui-input-inline">
							<input type="number" name="price" required
								lay-verify="required|number" th:value="${obj== null?'':obj.price}" placeholder="请输入价格保留两位小数"
								autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">规格名称</label>
						<div class="layui-input-inline">
							<input type="text" name="specificationName" th:value="${obj== null?'':obj.specificationName}" required
								lay-verify="" placeholder="" autocomplete="off"
								class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">商品规格</label>
						<div class="layui-input-inline">
							<input type="text" name="specification" th:value="${obj== null?'':obj.specification}" required
								lay-verify="" placeholder="" autocomplete="off"
								class="layui-input">
						</div>
					</div>
					<input type="hidden" name="maxPic" th:value="${obj == null?'':obj.maxPic}">
					
					<div class="layui-form-item" th:if="${obj == null}">
						<label class="layui-form-label">是否上架</label>
						<div class="layui-input-block">
							<input type="checkbox" name="state" lay-skin="switch"
								lay-text="上架|下架" lay-filter="isShowFilter" checked>
						</div>
					</div>
					
					<div class="layui-form-item">
						<label class="layui-form-label">商品大图</label>
						<div class="layui-input-block">
							<button type="button" class="layui-btn" id="maxPic">
								<i class="layui-icon">&#xe67c;</i>上传图片
							</button>
							<button type="button" class="layui-btn" onclick="del()">
								<i class="layui-icon">&#xe65c;</i>
							</button>
						</div>
					</div>
					<div class="layui-form-item layui-form-text">
						<blockquote class="layui-elem-quote" id="imgLook">
							
							<img alt="" style="width: 100px;height:100px" th:if="${obj != null}" th:src="${obj.maxPic}">
							
						</blockquote>
					</div>

					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script>
		layui.use([ 'form', 'layer', 'upload' ], function() {
			$ = layui.jquery;
			var form = layui.form, layer = layui.layer;
			var upload = layui.upload;
			//执行实例 上传大图
			var uploadInst = upload.render({
				elem : '#maxPic',
				url : '/fileUpload', //上传接口
				accept:"images",
				exts:"jpg|png|gif|bmp|jpeg|webp",
				choose:function(obj){
					//图片预览
					obj.preview(function(index, file, result){
				      var img = "<img src='"+result+"' style='width:100px;height:100px'>"
				      $("#imgLook").empty();
				      $("#imgLook").append(img)
					});
				},
				done : function(res) {
					//上传完毕回调
					if (res.success) {
						layer.msg("上传成功！")
						$("input[name='maxPic']").val(res.path);
						return;
					}
					layer.msg("上传失败！")
				},
				error : function() {
					layer.msg("请求接口异常！")
				}
			});
			//监听提交
			form.on('submit(add)', function(data) {
				
				if (data.field.state == "on") {
					
					data.field.state = 1;
				} else {
					data.field.state = 2;
				}
				
				$.post("saveGood",data.field,function(res){
					
					if (res.success) {
						//关闭当前frame
						layer.msg(res.msg);
					}
					setTimeout(function(){
						xadmin.close();
						xadmin.father_reload();
					},1000)
				})
				return false;
			});

		});
		
		
		function del(){
			 $("#imgLook").empty();
			 $("input[name='maxPic']").val("");
			 layer.msg("已清空");
		}
	</script>
</body>

</html>